<template>
  <div class="app-container"
    v-loading="loading">
    <div class="section-label mb20">
      <div class="section-label-title">实时概况</div>
      <view class="update-time">更新时间：2023-11-23 11:01:09</view>
    </div>
    <div class="section-box">
      <div class="data-show">
        <div class="item-data-show">
          <div class="item-data-label">
            <div class="item-data-label-txt">
              今日订单数
              <el-tooltip class="item"
                effect="dark"
                content="提示文字"
                placement="bottom">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="item-data-yesterday">昨日</div>
          </div>
          <div class="item-data-num">0</div>
          <div class="item-data-desc">
            <div class="item-data-desc1">
              日同比 0%
              <b class="item-data-val-down"></b>
            </div>
            <div class="item-data-desc2">昨日订单数0</div>
          </div>
          <div class="item-data-total">
            <div class="item-data-total-label">订单总数</div>
            <div class="item-data-total-num">59</div>
          </div>
        </div>
        <div class="item-data-show">
          <div class="item-data-label">
            <div class="item-data-label-txt">
              今日销售额(元)
              <el-tooltip class="item"
                effect="dark"
                content="提示文字"
                placement="bottom">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="item-data-yesterday">昨日</div>
          </div>
          <div class="item-data-num">0</div>
          <div class="item-data-desc">
            <div class="item-data-desc1">
              日同比 0%
              <b class="item-data-val-down"></b>
            </div>
            <div class="item-data-desc2">昨日销售额(元) 0</div>
          </div>
          <div class="item-data-total">
            <div class="item-data-total-label">销售总额</div>
            <div class="item-data-total-num">96.00</div>
          </div>
        </div>
        <div class="item-data-show">
          <div class="item-data-label">
            <div class="item-data-label-txt">
              今日新增会员数
              <el-tooltip class="item"
                effect="dark"
                content="提示文字"
                placement="bottom">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="item-data-yesterday">昨日</div>
          </div>
          <div class="item-data-num">0</div>
          <div class="item-data-desc">
            <div class="item-data-desc1">
              日同比 0%
              <b class="item-data-val-down"></b>
            </div>
            <div class="item-data-desc2">昨日新增会员数 0</div>
          </div>
          <div class="item-data-total">
            <div class="item-data-total-label">会员总数</div>
            <div class="item-data-total-num">236</div>
          </div>
        </div>
        <div class="item-data-show">
          <div class="item-data-label">
            <div class="item-data-label-txt">
              今日浏览量
              <el-tooltip class="item"
                effect="dark"
                content="提示文字"
                placement="bottom">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="item-data-yesterday">昨日</div>
          </div>
          <div class="item-data-num">0</div>
          <div class="item-data-desc">
            <div class="item-data-desc1">
              日同比 0%
              <b class="item-data-val-down"></b>
            </div>
            <div class="item-data-desc2">昨日浏览量 0</div>
          </div>
          <div class="item-data-total">
            <div class="item-data-total-label">总浏览量</div>
            <div class="item-data-total-num">1408</div>
          </div>
        </div>
      </div>
      <div class="data-num-show">
        <div class="item-data-num item-data-num-bg1">
          <div class="item-data-num-label">待付款订单</div>
          <div class="item-data-num-val">{{homeInfo.unPayOrderCnt || 0}}</div>
        </div>
        <div class="item-data-num item-data-num-bg2">
          <div class="item-data-num-label">待发货订单</div>
          <div class="item-data-num-val">{{homeInfo.procOrderCnt || 0}}</div>
        </div>
        <div class="item-data-num item-data-num-bg3">
          <div class="item-data-num-label">退款中订单</div>
          <div class="item-data-num-val">{{homeInfo.refundOrderCnt || 0}}</div>
        </div>
        <div class="item-data-num item-data-num-bg1">
          <div class="item-data-num-label">库存预警</div>
          <div class="item-data-num-val">{{homeInfo.yjpntCnt || 0}}</div>
        </div>
        <div class="item-data-num item-data-num-bg4">
          <div class="item-data-num-label">出售中商品</div>
          <div class="item-data-num-val">{{homeInfo.salPntCnt || 0}}</div>
        </div>
        <div class="item-data-num item-data-num-bg5">
          <div class="item-data-num-label">仓库中商品</div>
          <div class="item-data-num-val">{{homeInfo.pntCnt || 0}}</div>
        </div>
        <div class="item-data-num item-data-num-bg6">
          <div class="item-data-num-label">分销商申请</div>
          <div class="item-data-num-val">{{homeInfo.basShopSignCnt || 0}}</div>
        </div>
        <div class="item-data-num item-data-num-bg7">
          <div class="item-data-num-label">提现待审核</div>
          <div class="item-data-num-val">{{homeInfo.custGetcashCnt || 0}}</div>
        </div>
      </div>
      <div class="show-chart mt20">
        <div class="item-data-chart order-num-box mr20">
          <div class="item-chart-title">近十天订单数(个)</div>
          <div class="item-chart-box"
            ref="orderNum"></div>
        </div>
        <div class="item-data-chart sale-price-box">
          <div class="item-chart-title">销售额(元)</div>
          <div class="item-chart-box"
            ref="salePrice"></div>
        </div>
      </div>
    </div>
    <div class="section-label mb20 mt20">
      <div class="section-label-title">常用功能</div>
    </div>
    <div class="common-enter">
      <div class="item-enter"
        v-for="(item, idx) in commonList"
        :key="idx">
        <div class="item-enter-icon"><img :src="item.imgSrc"
            alt="" /></div>
        <div class="item-enter-title">{{ item.name }}</div>
        <div class="item-enter-desc">{{ item.desc }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  homeInfo
} from "@/api/djk/home";

export default {
  name: "Index",
  data () {
    return {
      loading: false,
      orderNum: null,
      salePrice: null,
      homeInfo: {},
      commonList: [
        {
          imgSrc: require("@/assets/images/member_manage.png"),
          name: "会员管理",
          desc: "会员管理页面",
          path: "",
        },
        {
          imgSrc: require("@/assets/images/member_withdraw.png"),
          name: "会员提现",
          desc: "会员提现页面",
          path: "",
        },
        {
          imgSrc: require("@/assets/images/shop_settings.png"),
          name: "商品设置",
          desc: "商品设置页面",
          path: "",
        },
        {
          imgSrc: require("@/assets/images/issue_good.png"),
          name: "待定",
          desc: "页面",
          path: "",
        },
        {
          imgSrc: require("@/assets/images/fenxiao_config.png"),
          name: "分销配置",
          desc: "分销配置页面",
          path: "",
        },
        {
          imgSrc: require("@/assets/images/order_select.png"),
          name: "订单列表",
          desc: "订单列表页面",
          path: "",
        },
      ],
    };
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.loading = true;
      homeInfo().then((response) => {
        this.homeInfo = response.data
        this.loading = false;
        this.orderNumLoad()
        this.salePriceLoad()
      });
    },
    orderNumLoad () {
      let data = this.homeInfo.orderSaleList
      let dateList = [], xseriesData = []
      data.forEach(item => {
        dateList.push(item.createTime)
        xseriesData.push(item.orderCnt)
      })
      this.orderNum = echarts.init(this.$refs.orderNum, "macarons");
      this.orderNum.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}",
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true,
        },
        xAxis: {
          data: dateList,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "订单数",
            type: "line",
            data: xseriesData,
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
        ],
      });
    },
    salePriceLoad () {
      let data = this.homeInfo.orderSaleList
      let dateList = [], xseriesData = []
      data.forEach(item => {
        dateList.push(item.createTime)
        xseriesData.push(item.receiptsTotal)
      })
      this.salePrice = echarts.init(this.$refs.salePrice, "macarons");
      this.salePrice.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}",
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true,
        },
        xAxis: {
          data: dateList,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "销售额",
            type: "line",
            data: xseriesData,
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f9f9f9;
}
.section-label {
  display: flex;
  align-items: center;
  .section-label-title {
    font-size: 14px;
    color: #000;
    font-weight: bold;
  }
  .update-time {
    font-size: 12px;
    color: #999;
  }
}
.data-show {
  display: flex;
  .item-data-show {
    flex: 1;
    background-color: #fff;
    padding: 16px;
    &:not(:last-child) {
      margin-right: 20px;
    }
    .item-data-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item-data-label-txt {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #000;
        .el-icon-question {
          margin-left: 4px;
        }
      }
      .item-data-yesterday {
        width: 40px;
        height: 20px;
        text-align: center;
        line-height: 18px;
        color: #ef6a22;
        font-size: 12px;
        border: 1px solid #ef6a22;
        cursor: pointer;
      }
    }
    .item-data-num {
      font-size: 48px;
      color: #ef6a22;
      font-weight: bold;
      margin: 20px 0 10px;
    }
    .item-data-desc {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #000;
      .item-data-desc1 {
        display: flex;
        align-items: center;
        b {
          display: block;
          margin-left: 8px;
        }
        .item-data-val-up {
          border: 3px solid #ef6a22;
          border-left-color: transparent;
          border-bottom-color: transparent;
          transform: rotate(-45deg);
          position: relative;
          top: 2px;
        }
        .item-data-val-down {
          border: 3px solid #70c72c;
          border-left-color: transparent;
          border-top-color: transparent;
          transform: rotate(45deg);
          position: relative;
          top: -2px;
        }
      }
      .item-data-desc2 {
        margin-left: 16px;
      }
    }
    .item-data-total {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #000;
      margin-top: 32px;
    }
  }
}
.data-num-show {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .item-data-num {
    flex: 1;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &:not(:last-child) {
      margin-right: 20px;
    }
    .item-data-num-label {
      font-size: 16px;
      color: #000;
    }
    .item-data-num-val {
      color: #ef6a22;
      font-size: 28px;
      font-weight: bold;
      margin-top: 10px;
    }
  }
  .item-data-num-bg1 {
    background-color: #f6eae5;
  }
  .item-data-num-bg2 {
    background-color: #f6e6e4;
  }
  .item-data-num-bg3 {
    background-color: #e5eaf7;
  }
  .item-data-num-bg4 {
    background-color: #e7f0e5;
  }
  .item-data-num-bg5 {
    background-color: #f7efe5;
  }
  .item-data-num-bg6 {
    background-color: #e5f0f3;
  }
  .item-data-num-bg7 {
    background-color: #e8e5f7;
  }
}
.show-chart {
  display: flex;
  .item-data-chart {
    flex: 1;
    background-color: #fff;
    padding: 15px;
    .item-chart-title {
      font-size: 14px;
      color: #000;
      margin-bottom: 10px;
    }
    .item-chart-box {
      width: 100%;
      height: 350px;
    }
  }
}
.common-enter {
  display: flex;
  .item-enter {
    width: 200px;
    height: 140px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:not(:last-child) {
      margin-right: 10px;
    }
    .item-enter-icon {
      width: 40px;
      height: 40px;
      margin-bottom: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .item-enter-title {
      font-size: 14px;
      color: #000;
      margin-bottom: 6px;
    }
    .item-enter-desc {
      font-size: 12px;
      color: #666;
    }
  }
}
</style>
